/**
 * Some of the code below is the default styles from jquery-form-validator by Victor Jonsson <victorjonsson.se>
 */

/* Input element having an invalid value */
select.error,
input.error,
textarea.error {
  border-color: #b94a48;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  border-color: rgb(185, 74, 72);
}

select.error,
input.error {
  background-image: url('');
  background-position:  right 5px center;
  background-repeat: no-repeat;
}

/* Input element having a valid value */
select.valid,
input.valid {
  border-color: #468847;
  background-image: url('');
  background-position: right 5px center;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

/* File inputs with invalid value */
input[type="file"].error {
  color: #b94a48;
  background: none;
  box-shadow: none;
}

/* File inputs with valid value */
input[type="file"].valid {
  color: #468847;
  background: none;
  box-shadow: none;
}

/* Element showing an inline error message */
.form-error {
  display: block;
  color: #b94a48;
  margin-top: 5px;
  margin-bottom: 10px;
  line-height: 140%;
}

/* Element showing the help text declared in data-validation-help */
span.help {
  color: #999;
  font-size: 90%;
}

/* Here you can style the look of the input while server being
  requested when using data-validation="server" */
select.async-validation,
input.async-validation,
select.validating-server-side, /* deprecated */
input.validating-server-side /* deprecated */ {
  opacity: 0.5;
  background-image: url('');
  background-position:  right 5px center;
  background-repeat: no-repeat;
  background-color: #FFF;
}

/* Container for error messages when having configuration
   parameter "errorMessagePosition" set to "top" */
div.form-error {
  background-color: #f2dede;
  padding: 15px;
  margin-bottom: 20px;
  border: #b94a48 1px solid;
  border-radius: 4px;
}

/* Title in top of the error message container */
div.form-error strong {
  font-weight: bold;
  display: block;
  margin: 0;
  padding: 0 0 10px;
}

/* Typography styling in the error message container */
div.form-error strong,
div.form-error ul li {
  line-height: 140%;
  color: #b94a48;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
}

div.form-error ul,
div.form-error ul li {
  background: none;
}

.grecaptcha-badge {
  margin: 0;
}

.g-recaptcha {
  &-container {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .filler {
      display: none;
    }
  }

  &.btn {
    height: 38px;
    margin-top: 11px;
  }
}

.generic-success, .generic-error, .captcha-error {
  margin-bottom: 10px;
}

form {
  .should-fade {
    transition: $transition-base;
    opacity: 1;
  }

  &.success .should-fade {
    opacity: 0.2;
  }

  #generic-success {
    transition: $transition-base;
    position: absolute;
    left: -.25rem;
    top: -1rem;
    width: calc(100% + .5rem);
    height: calc(100% + 2rem);
    border-radius: 5px;
    z-index: 100;
    display: flex;
    opacity: 1;
    visibility: visible;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;

    &.hidden {
      opacity: 0;
      visibility: hidden;
    }
  }
}

@media screen and (min-width: 768px) {
  .grecaptcha-badge {
    margin-bottom: 0;
  }

  .g-recaptcha-container {
    flex-direction: row;
    justify-content: space-between;
  }

  .g-recaptcha-container .filler, .g-recaptcha-filler {
    display: block;
    width: 256px;
  }
}
